<template>
    <div class="datasets-cards-wrapper">
        <div class="datasets-cards-header">
            <el-input class="search-box" placeholder="搜索数据集" suffix-icon="Search" round></el-input>
            <div class="datasets-view-switch">
                <div class="datasets-view-btn" :class="_datasets_view === 'datasets_cloud' ? 'selected' : ''"
                    @click="_datasets_view = 'datasets_cloud'">数据集</div>
                <div class="datasets-view-btn" :class="_datasets_view === 'datasets_local' ? 'selected' : ''"
                    @click="_datasets_view = 'datasets_local'">本地数据集</div>
            </div>
        </div>
        <div class="datasets-cards-body">
            <TypeBar _title="数据集" @select-type="onSelectType"></TypeBar>
            <DatasetList v-if="_datasets_view == 'datasets_local'" ref="dataset_list" @load-dataset="onLoadDataset">
            </DatasetList>
            <DatasetCloudList v-if="_datasets_view == 'datasets_cloud'" ref="dataset_cloud"></DatasetCloudList>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue';
import TypeBar from '../TypeBar.vue';
import DatasetList from './DatasetList.vue';
import DatasetCloudList from './DatasetCloudList.vue';

const name = 'HomePanel';
const { proxy } = getCurrentInstance();
const emit = defineEmits(['loadDataset']);

const _datasets_view = ref('datasets_local');

function onLoadDataset(dataset_id) {
    // console.log('Home onLoadDataset dataset_id : ', dataset_id);
    emit('loadDataset', dataset_id);
}

function getDatasetList() {
    proxy.$refs.dataset_list && proxy.$refs.dataset_list.getDatasetList();
}

function onSelectType(typeInfo) {
    // console.log('onSelectType typeInfo : ', typeInfo);
    proxy.$refs.dataset_cloud && proxy.$refs.dataset_cloud.getDatasetsCloudList();
    proxy.$refs.dataset_list && proxy.$refs.dataset_list.getDatasetList();
}

defineExpose({ getDatasetList });
</script>

<style scoped>
.datasets-cards-wrapper {
    background-color: rgb(239, 241, 243);
    width: calc(100% - 64px);
    height: 100%;
    padding: 0px;
    box-sizing: border-box;
}

.datasets-cards-body {
    display: flex;
    width: 100%;
    height: calc(100% - 53px);
}

.datasets-cards-header {
    display: flex;
    background-color: rgb(249, 248, 248);
    align-items: center;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

.search-box {
    width: 300px;
    border-radius: 10px;
}

.datasets-view-switch {
    display: flex;
    position: absolute;
    right: 10px;
}

.datasets-view-btn {
    background-color: aquamarine;
    padding: 8px;
    width: 80px;
    margin-right: 1px;
    text-align: center;
    font-size: 12px;
    background-color: rgb(98, 92, 92);
    /* box-shadow: inset 2px 2px 5px rgb(67, 67, 67); */
    color: aliceblue;
    cursor: pointer;
}

.datasets-view-btn.selected {
    background-color: rgb(224, 93, 93);
    box-shadow: inset 2px 2px 5px rgb(154, 56, 56);
}
</style>
